<template>
    <view>
        <view class="page-body">
			<view class="box" v-if="isShowVideo">
				<video style="width: 100%;" id="teachVideo" :loop="false" :src="videoUrl" :autoplay="true" @error="videoErrorCallback" @timeupdate="videoCurrentTime" @ended="videoEnd" controls></video>
			</view>
			
			<view class="box-view" v-if="!isShowVideo"></view>
			<view class="video-list">
				<view class="title"><image src="../../static/icons/video.png"></image>APP教学视频</view>
				<view class="list">
                    <view class="item" v-for="(item,index) in videoData.list" :key="index" @tap="chooseVideo(item.video_url,item.id)">
                    	<view class="thumb"><image mode="aspectFit" :src="item.img_url? https + item.img_url:'../../static/images/logo.png'"></image></view>
                    	<text class="text">{{item.title}}</text>
                    </view>
                </view>
			</view>
        </view>
		<view class="windows" :class="windowsState">
			<!-- 遮罩层 -->
			<view class="mask" @touchmove.stop.prevent="discard" @tap="closeRedEnvelope"></view>
			<view class="layer" @touchmove.stop.prevent="discard">
				<view class="open-redenvelope">
					<view class="top">
						<view class="close-btn">
							<view class="icon" v-if="openRed" @tap="closeRedEnvelope"></view>
						</view>
						<view class="red-price" :class="[openRed?'open':'']">
							<image :src="openRed?userHeadPic:'../../static/images/red-price.png'"></image>
						</view>
					</view>
					<view class="red-btn" @tap="getMoney" v-if="!openRed">领取红包</view>
					<view class="red-content" v-if="openRed"><text>恭喜您!</text><text class="num">{{redText.msg}}</text></view>
				</view>
			</view>
		</view>
		<view class="m-full-loading" v-if="showLoading" @touchmove.stop.prevent="discard">
			<view class="m-loading">
				<image src="../../static/images/loading.gif" mode="widthFix"></image>
			    <text>加载中</text>
			</view>
		</view>
		
    </view>
</template>

<script>
	import henglang from '@/common/common.js';
	import jewel from '@/common/common_zb.js';
	export default {
		data() {
			return {
				windowsState: '',
				userHeadPic:'',
				isOpen: false,
				openRed: false,
				videoUrl:'',
				videoContext:'',
				isShowVideo:true,
				https:'https://home.gdhenglang.com',
				videoData:[],
				redText:[],
				showLoading: false
			}
		},
		onReady: function (res) {
			this.videoContext = uni.createVideoContext('teachVideo')
		},
		methods: {
			videoErrorCallback(e) {
				console.log('视频错误信息:')
				console.log(e.target.errMsg)
			},
			closeRedEnvelope(){
				let that = this;
				that.windowsState = 'hide'
				that.isShowVideo = true
				setTimeout(()=>{
					that.windowsState = '';
				},200)
				that.startPlay('play');
			},
			getMoney(){
				let that = this;
				that.showLoading = true;
				henglang.post('Help/collarRed',{},false,function(res){
					that.showLoading = false
					if(res.data.code == 1 || res.data.code == -1){
						that.windowsState = 'rotate';
						that.redText = res.data
						that.isOpen = true
						setTimeout(function(){
							  that.windowsState = 'show';
							  that.openRed = true;
						},2000);
					}else if(res.data.code == 0){
						uni.showModal({
							title: '福利来了',
							content: '请注册登录领取红包',
							success: function (res) {
								if (res.confirm) {
									uni.navigateTo({
										url:'/pages/user/login'
									})
									that.windowsState = 'hide'
									that.isShowVideo = true
									setTimeout(()=>{
										that.windowsState = '';
									},200)
								} else if (res.cancel) {
									that.openRed = false;
									that.closeRedEnvelope();
								}
							}
						});
					}
				});
				
			},
			videoCurrentTime(e){
				if(!this.isOpen){
					let currentTime = Math.round(e.detail.currentTime)
					let duration = parseInt(Math.random()*e.detail.duration,10)+1;
					if(10 < currentTime && currentTime == duration){
						this.windowsState = 'show'
						// #ifdef APP-PLUS
						this.isShowVideo = false
						// #endif
						this.startPlay('pause');
					}else if(currentTime == parseInt(e.detail.duration) && currentTime + parseInt(e.detail.duration) > 0){
						this.windowsState = 'show'
						// #ifdef APP-PLUS
						this.isShowVideo = false
						// #endif
						this.startPlay('pause');
						
					}
				}
			},
			chooseVideo(url,id){
				let that = this
				that.videoId = id
				that.videoUrl = that.https + url
				that.startPlay('play');
				uni.pageScrollTo({
				    scrollTop: 0,
				    duration: 100
				});
			},
			discard(){
				return;
			},
			startPlay(type) {
				if (this.videoContext) {
					if(type == 'play'){
						this.videoContext.play()
					}else{
						this.videoContext.pause()
						this.videoContext.exitFullScreen()
					}
				}
			},
			videoEnd(e){
				let that = this
				jewel.post('jewel_member_task/record_video_number',{video_id:that.videoId},false,function(res){
					
				});
			}
		},
		onLoad({type}) {
			let that = this
			let data = {}
			that.userHeadPic = uni.getStorageSync('userInfo').head_pic_text
			that.showLoading = true
			if(type==1){
				data = {type:2}
			}
			henglang.post('Help/getList',data,false,function(res){
				if(res.data.code == 0){
					that.videoData = res.data.data
					that.videoId = that.videoData.list[0].id
					that.videoUrl = that.https + that.videoData.list[0].video_url
					if(that.videoData.is_already_led == 0){
						that.isOpen = false
					}else{
						that.isOpen = true
					}
				}
				that.showLoading = false
			});
		}
	}
</script>

<style lang="scss">
.m-full-loading{
	background: rgba(255,255,255,0);
	z-index: 1002;
}
.box{
	width: 750rpx;
}
.box-view{
	height: 225px;
	width: 100%;
	background: #000000;
}
#teachVideo{
	width: 100%;
	display: block;
}
.video-list{
	.title{
		font-size: 34upx;
		color: #1b1b1b;
		display: flex;
		align-items: center;
		padding: 40upx 0 20upx 0;
		image{
			width: 45upx;
			height: 40upx;
			margin: 0 12upx;
		}
	}
	.list{
		display: flex;
		flex-wrap: wrap;
		.item{
			padding: 0 3%;
			width: 44%;
			margin-bottom: 30upx;
			.thumb{
				background-color: #000000;
			}
			image{
				width: 100%;
				height: 190upx;
				display: block;
			}
			.text{
				color: #878787;
				font-size: 26upx;
				text-align: center;
				display: block;
				width: 100%;
				margin-top: 20upx;
			}
		}
	}
}
.windows{
	.mask{
		position: fixed;
		top: 100%;
		width: 100%;
		height: 100%;
		z-index: 1000;
		background-color: rgba(0,0,0,.6);
		opacity: 0;
		transition: opacity .2s ease-out;
	}
	.layer{
		position: fixed;
		width: 65%;
		height: 50%;
		left: 18%;
		z-index: 1001;
		border-radius: 20upx;
		overflow: hidden;
		top:100%;
		transform: scale3d(.5,.5,1);
		transition: all .2s ease-out;
	}
	&.show{
		display: block;
		.mask{
			top: 0;
			opacity: 1;
		}
		.layer{
			transform: translate3d(0,-75vh,0) scale3d(1,1,1);
		}
	}
	&.hide{
		display: block;
		.mask{
			top: 0;
			opacity: 0;
		}
		.layer{
			//transform: translate3d(0,-85vh,0) scale3d(.5,.5,1);
		}
	}
	&.rotate{
		display: block;
		.mask{
			top: 0;
			opacity: 1;
		}
		.layer{
			animation:chandou 0.15s infinite ease alternate both;
			transform: translate3d(0,-75vh,0) scale3d(1,1,1);
		}
	}
}
.open-redenvelope{
	width: 100%;
	height: 50vh;
	background-color: #cf3c35; 
	position: relative;
	.top{
		width: 100%;
		background-color: #fe5454;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		border-radius: 0 0 100% 100%;
		box-shadow: inset 0 -20upx 0 #9c1712;
		.close-btn{
			width: 100%;
			height: 80upx;
			display: flex;
			justify-content: flex-end;
			margin-bottom: 30upx;
			position: relative;
			.icon{
				margin-top: 10upx;
				margin-right: 10upx;
				width: 56upx;
				height: 56upx;
			}
			.icon::after{
				content: '';
				position: absolute;
				top: 36upx;
				right: 10upx;
				width: 60upx;
				height: 4upx;
				background: #d41c06;
				transform:rotate(45deg);
			}
			.icon::before{
				content: '';
				position: absolute;
				top: 36upx;
				right: 10upx;
				width: 60upx;
				height: 4upx;
				background: #d41c06;
				transform:rotate(135deg);
			}
		}
		.red-price{
			width: 130upx;
			height: 130upx;
			border: solid 12upx #cf3c35;
			border-radius: 100%;
			margin-bottom: -65upx;
			background: #f8d757;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			overflow: hidden;
			image{
				width: 52upx;
				height: 75upx;
			}
			&.open{
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.red-btn{
		width: 320upx;
		height: 110upx;
		background: #b51b07;
		border-radius: 30upx;
		text-align: center;
		line-height: 110upx;
		color: #ffbb4d;
		font-size: 58upx;
		position: absolute;
		bottom: 140upx;
		left: 50%;
		margin-left: -160upx;
		box-shadow: 0upx 10upx 0upx #851506;
		text-shadow: 0upx -4upx 0upx #ff8400;
	}
	.red-content{
		margin-top: 140upx;
		text{
			display: block;
			text-align: center;
			color: #ffbd62;
			font-size: 40upx;
			margin-bottom: 20upx;
		}
		.num{
			font-size: 50upx;
		}
	}
}
@keyframes chandou{
	0%{transform:rotate(-2deg) translate3d(0,-75vh,0) scale3d(1,1,1)}
	50%{transform:rotate(0deg) translate3d(0,-75vh,0) scale3d(1,1,1)}
	100%{transform:rotate(2deg) translate3d(0,-75vh,0) scale3d(1,1,1)}
}

</style>
